//引入帮我们实现单页面应用的第三方包
import SMERouter from 'sme-router'

// 格式化日期时间的js库
import dayjs from 'dayjs'
window.dayjs = dayjs

// 引入模板
import index from '@v'
import login from '@v/login'
import adminList from '@v/adminList'
import advList from '@v/advList'

// 引入发送请求的函数
import { reqGetAdmins } from '@api/adminApi'
import { reqlogin, reqLogout, reqVerifyToken } from '@api/loginApi'
import { reqAddAdv, reqGetAdvs, reqDelAdv } from '@api/advApi'

// 实例化配置前端路由规则的路由对象
// 传入index.html中用于渲染各个页面的节点id
const router = new SMERouter('root', 'html5')
// 注意: 我们的代码使用了模块化,每一个js文件都是一个单独的模块.当前模块的变量,都是局部变量.全局如果要使用.则手动暴露到全局
window.router = router
// 配置前端路由规则:
router.route('/login', function (req, res) {
  // 渲染login页面
  res.render(login())

  // 注意: 一定要等页面渲染完毕之后,再去获取dom元素
  $('#loginBtn').on('click', async function (e) {
    // 阻止默认行为
    e.preventDefault()
    //1. 获取表单中的用户输入的用户名和密码
    const username = $('#username').val().trim()
    const password = $('#password').val().trim()
    //2. 封装发送请求的函数,并调用
    const result = await reqlogin(username, password)

    if (result.status) {
      //5. 存储token
      localStorage.setItem('token', result.token)
      // 存储当前用户的信息
      localStorage.setItem('user', JSON.stringify(result.admin))
      //3. 根据响应结果判断是否登录成功,成功则提示用户,并跳转到首页
      // 单页面应用中,如果从一个页面切换到另一个页面,经常需要传递数据
      router.go('/index', { username: result.admin.username })
      // 提示用户
      toastr.success(result.message)
    } else {
      //4. 如果没有登录成功,则不跳转,直接提示用户
      toastr.error(result.message)
    }
  })
})
router.route('/index', async function (req, res, next) {
  const user = JSON.parse(localStorage.getItem('user'))

  if (!user) return router.go('/login')
  const result = await reqVerifyToken(user.id)
  if (!result.status) {
    toastr.error(result.message)
    router.go('/login')
    return
  }
  next(
    index({
      url: req.url,
      subRoute: res.subRoute(),
      username: req.body.username, // 登录成功之后,传递过来的用户名
    })
  )
  // 退出登录逻辑
  // 1. 找到退出登录按钮,注册点击事件
  $('#logoutBtn').on('click', async function () {
    // 2. 在事件处理函数中,删除本地的token
    localStorage.setItem('token', '')
    // 3. 给服务器发送请求,删除数据库中的token
    // 从localStorage中获取用户id
    const id = JSON.parse(localStorage.getItem('user')).id
    await reqLogout(id)
    // 4. 提示用户
    toastr.success('退出登录')
    // 跳转到登录页面
    router.go('/login')
  })
})
// 定义/index下面的嵌套路由
router.route('/index/advList', async function (req, res) {
  const result = await reqVerifyToken(
    JSON.parse(localStorage.getItem('user')).id
  )
  if (!result.status) {
    toastr.error(result.message)
    router.go('/login')
    return
  }

  // 查询所有广告数据,并渲染
  const data = await reqGetAdvs()
  res.render(advList(data.advs))
  // 获取模态框保存按钮,并注册点击事件
  $('.proxy-parent').on('click', '#saveOrUpdateAdv', async function () {
    // 先获取表单中的所有数据.由于表单中有文件,所以肯定要使用formdata.通过formdata也可以获取到表单数据
    // 进行表单校验.校验规则: 每一个表单项的值不能为空
    const formdata = new FormData($('#form')[0])
    if (
      !formdata.get('advTitle') ||
      !formdata.get('advCate') ||
      !formdata.get('advLink') ||
      !formdata.get('file').size
    )
      return toastr.error('请正确填写表单')

    // 给发送请求,上传数据
    // 由于服务器接口要校验token,所以除了添加的数据之外,要额外的添加当前用户的id
    formdata.append('id', JSON.parse(localStorage.getItem('user')).id)
    const result = await reqAddAdv(formdata)

    if (result.status) {
      // 清空表单
      $('#form')[0].reset()
      // 清空预览图
      $('#showImg')[0].src = ''
      //提示用户
      toastr.success(result.message)
      // 根据响应回来的最新的数据,重新渲染页面
      res.render(advList(result.advs))
    } else {
      toastr.error(result.message)
      router.go('/login')
    }
  })

  // 获取上传文件表单元素的dom对象,并注册change事件
  $('.proxy-parent').on('change', '#preImg', function (e) {
    // 读取选中的文件的信息
    try {
      // 1. 创建reader对象
      const reader = new FileReader()
      // 2. 将选中的文件转成base64
      reader.readAsDataURL(e.target.files[0])

      // 3. 通过reader.load获取转换后的图片
      reader.onload = function (e) {
        // console.log(e.target.result) // 转换后的base64
        // 将base64赋值给预览的图片
        $('#showImg')[0].src = e.target.result
      }
    } catch (error) {
      $('#showImg')[0].src = ''
    }
  })

  // 删除广告
  $('.proxy-parent').on('click', '.adv-del-btn', async function (e) {
    // 获取要删除的数据的id
    const advId = e.target.id
    // 发送请求删除广告
    const result = await reqDelAdv(advId)
    // 提示
    toastr.success(result.message)
    // 重新渲染
    res.render(advList(result.advs))
    // router.go('/index/advList')
  })
})
router.route('/index/adminList', async function (req, res) {
  const verResult = await reqVerifyToken(
    JSON.parse(localStorage.getItem('user')).id
  )
  if (!verResult.status) {
    toastr.error(verResult.message)
    router.go('/login')
    return
  }
  // 1. 在这里发送请求获取管理员数据
  // 2. 下载axios
  // 3. 发送的请求
  const result = await reqGetAdmins()
  // result.data是一个数组,数组中有管理员数据.管理员数据中有和日期相关的数据,但是展示格式不好看,所以需要格式化之后再渲染
  result.data.forEach((item) => {
    item.last_login = dayjs(item.last_login).format('YYYY年MM月DD HH时mm分ss秒')
    item.registe_date = dayjs(item.registe_date).format(
      'YYYY年MM月DD HH时mm分ss秒'
    )
  })
  res.render(adminList(result.data))
})

router.route('*', function (req, res) {
  // router.go('/login')
  res.redirect('/login')
})
